/*
  按钮
  更多情况使用Container自定义按钮
 */

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "button",
      home: Scaffold(
        appBar: AppBar(
          title: Text('Button'),
        ),
        body: Center(
          child: Wrap(
            children: [
              // 带阴影按钮
              ElevatedButton(
                child: Text(
                  '开始',
                  style: TextStyle(fontSize: 18),
                ),
                onPressed: () {
                  print('you click me');
                },
                style: ButtonStyle(
                    // 设置形状
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(5.0))))),
              ),
              // 只有文字、无边框按钮
              TextButton(onPressed: () {}, child: Text('过火')),
              // 带线框按钮
              OutlinedButton(child: Text('outBtn'), onPressed: () {}),
              MyButton(text: '自定义按钮', width: 80, pressed: (){
                print('you click me');
              },)
            ],
          ),
        ),
      ),
    );
  }
}

/*
  自定义按钮
 */
class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final width;
  final height;

  const MyButton(
      {Key? key,
        this.text='',
        this.pressed, this.width=60, this.height=40,
      }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: pressed,
      onTapDown: (TapDownDetails details){
        // 这里可以设置按下的颜色
        print('tap down');
      },
      child: Container(
        // color: Colors.lightBlue,
        decoration: BoxDecoration(
          color: Colors.lightBlue,
          borderRadius: BorderRadius.circular(8.0),
        ),
        alignment: Alignment.center,
        child: Text(text, style: TextStyle(color: Colors.white)),
        width: width,
        height: height,
      ),
    );
  }
}

/// 圆角按钮
class RoundedButton extends StatelessWidget {
  final VoidCallback callback;

  final Color? textColor;

  final Color? backgroundColor;

  final TextStyle? textStyle;

  final String data;

  final EdgeInsetsGeometry padding;

  final Color? borderColor;

  const RoundedButton(
      {Key? key,
      required this.callback,
      this.textColor,
      this.backgroundColor,
      this.textStyle,
      required this.data,
      this.padding = EdgeInsets.zero,
      this.borderColor})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: callback,
      child: Text(
        data,
        style: textStyle,
      ),
      // 建议使用styleFrom,更加直观
      style: OutlinedButton.styleFrom(
        primary: textColor,
        backgroundColor: backgroundColor,
        // 将最小大小设置为1,边距设置为0,即可去掉按钮边距
        padding: padding,
        minimumSize: Size(1, 1),
        // 圆角角度
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
        // 圆角颜色
        side: borderColor == null
            ? BorderSide.none
            : BorderSide(color: borderColor!),
      ),
    );
  }
}
